<template>
<!--  -->
  <el-tabs
      style="width: calc(100vw - 200px)"
      v-model="$route.fullPath"
      type="card"
      @tab-click="clickTab"
      @tab-remove="removeTab"
  >
    <el-tab-pane
        label="首页"
        name="/homePage"
    />
    <el-tab-pane
        v-for="item in openTab"
        :label="item.name"
        :name="item.path"
        closable
    >
    </el-tab-pane>
  </el-tabs>

</template>

<script>
import {  mapState } from 'vuex'
export default {
  name:"Tabs",
  data(){
    return{
      activeIndex: '',
    }
  },
  // 此处禁止加mounted
  computed: {
    openTab () {
      return this.$store.state.tabList
    },
  },
  methods:{
    clickTab (tab) {
      // 不知道为什么push的是tab.props.name，可以打印看看
      console.log(tab.props)
      this.$router.push(tab.props.name)
    },
    removeTab (target) {
      this.$store.commit('delete_tabs', target)
    }
  }

}
</script>

<style>
</style>
